{extend name="base"/}
{block name="resources"}
<style>
	.ns-package-details{display: flex;width: 615px;margin: 35px auto;color: #333;}
	.ns-package-details .detail-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
	.ns-package-details .detail-img img{max-width: 100%;max-height: 100%;}
	.ns-package-details .detail-content{flex: 1;}
	.ns-package-details .detail-title{font-size: 18px;color: #323233;line-height: 24px;margin-right: 8px;margin-bottom: 8px;}
	.ns-package-details .detail-desc{color: #969799;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	.ns-package-details .detail-price{margin-left: 5px;}
	.ns-package-details .detail-shop{font-size: 16px;margin-top: 20px;display: inline-block;}
	.ns-package-details .detail-use{margin-top: 20px;}
	.ns-package-details .detail-use > span{font-size: 16px;}
	.ns-package-details .ns-item-block-parent{padding:15px 0 20px;}
	.ns-item-block-parent .ns-item-block-wrap{border: 1px solid #e5e5e5;margin-right: 10px;margin-bottom: 10px;flex-basis: 25%;}
	.ns-item-block-parent .ns-item-con .ns-item-content-desc{white-space: nowrap;width: 72px;overflow: hidden;text-overflow: ellipsis;}
</style>
{/block}
{block name="main"}
<div class="ns-package-details layui-form">
	<div class="detail-img">
		<img src="{:img($info.image)}" alt="">
	</div>
	<div class="detail-content">
		<h2 class="detail-title">{$info.group_name}<span class="detail-price ns-text-color">{$info.fee}元/{$info.num}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</span></h2>
		<p class="detail-desc">{$info.desc ?: '暂无描述'}</p>
		<span class="detail-shop">免费店铺数：{$info.site_num}</span>
		<div class="detail-use">
			<span>应用</span>
			<div class="ns-item-block-parent ns-item-five" >
				{foreach $addons as $list_k => $list_v}
				<div class="ns-item-block-wrap">
					<div class="ns-item-pic">
						<img src="{:img($list_v.icon)}" />
					</div>
					<div class="ns-item-con">
						<div class="ns-item-content-title">{$list_v.title}</div>
						<p class="ns-item-content-desc">{$list_v.description}</p>
					</div>
				</div>
				{/foreach}
			</div>
		</div>
		<input type="hidden" name="group_id" value={$info.group_id}>
		<div class="detail-operation">
			<button class="layui-btn ns-bg-color" onclick="purchase()">立即购买</button>
			<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script>

	var goodsId = "{$info.group_id}";

	//立即购买
	function purchase(){
		$.ajax({
			type: 'POST',
			url: ns.url("home/sysusergroup/checkOrder"),
			dataType: 'JSON',
			success: function(res) {
				if (res.code >= 0) {
					if (res.data){
						var index = layer.open({
							type: '0',
							title: '订购提醒',
							btn: ['去支付', '重新购买'],
							content: '你有未完成支付的服务订单，可直接支付或重新购买',
							yes: function(index, layero){
								location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data.out_trade_no});
								layer.close(index);
							},
							btn2: function(){
								//跳转到购买页面
								location.href = ns.url('home/sysusergroup/payment', {group_id: goodsId});
								layer.close(index);
							}
						})
					}else{
						//跳转到购买页面
						location.href = ns.url('home/sysusergroup/payment', {group_id: goodsId});
					}
				}
			}
		});
	}

	// 返回
	function back() {
		location.href = ns.url("home/sysusergroup/index");
	}
</script>
{/block}